<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-header">
        <div class="logo">
          <img src="../../../assets/vue.svg"/>
        </div>
        <h2>登录</h2>
      </div>
      <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" class="login-form">
        <el-form-item prop="email">
          <el-input v-model="loginForm.email" placeholder="邮箱地址">
            <template #prefix>
              <el-icon>
                <Message/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" placeholder="密码" show-password>
            <template #prefix>
              <el-icon>
                <Lock/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin" class="login-button">登录</el-button>
        </el-form-item>
      </el-form>
      <div class="login-footer">
        <el-link :underline="false" @click="router.push('/forgot')">忘记密码？</el-link>
        <el-link :underline="false" @click="router.push('/register')">注册新账号</el-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive} from 'vue'
import {ElMessage} from 'element-plus'
import {Message, Lock} from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
import {login} from '@/api/userApi'
import {useStore} from 'vuex'

// 路由
const router = useRouter()
// 仓库
const store = useStore()
// 登录参数
const loginForm = reactive({
  email: '1744609175@qq.com',
  password: '123456'
})
// 校验规则
const loginRules = {
  email: [
    {required: true, message: '请输入邮箱', trigger: 'blur'},
    {type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change']}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'}
  ]
}

const loginFormRef = ref()

function handleLogin() {
  loginFormRef.value.validate(async (valid) => {
    if (valid) {
      // 调用登录接口
      const res = await login(loginForm);
      store.commit('setUser', res)
      store.commit('setToken', res.token)
      // 登录逻辑
      ElMessage.success('登录成功')
      router.push('/plat-tools')
    } else {
      ElMessage.error('请检查输入')
      return false
    }
  })
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 120px); /* Assuming header+footer height */
  background-color: #f7f8fa;
}

.login-box {
  background-color: white;
  padding: 2.5rem 3rem;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 345px;
  text-align: center;
}

.login-header {
  margin-bottom: 2rem;
}

.logo {
  margin-bottom: 1rem;
}

.login-header h2 {
  font-size: 2rem;
  font-weight: 600;
  color: #333;
}

.login-form {
  text-align: left;
}

.login-button {
  width: 100%;
  padding: 18px 20px;
  font-size: 1rem;
  height: 48px;
  border-radius: 8px;
  background: #6D5BFF;
  border-color: #6D5BFF;
}

.login-button:hover {
  background: #5a48e3;
  border-color: #5a48e3;
}

.login-footer {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.login-footer .el-link {
  color: #888;
  font-weight: 500;
}

.login-footer .el-link:hover {
  color: #6D5BFF;
}

:deep(.el-input__inner) {
  height: 48px;
  line-height: 48px;
}

:deep(.el-input__prefix) {
  align-items: center;
  display: flex;
}

:deep(.el-input .el-input__icon) {
  font-size: 16px;
}
</style>